<!--
 * @Author: Bennty
 * @Date: 2024-08-27 13:29:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-05 15:38:22
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="采购申请" @close="handleClose" width="70%" destroy-on-close >
        <el-form :model="formData" ref="formRef">
            <el-table :data="tableData">
                <el-table-column label="材料大类" prop="productCategoriesName" align="center" width="120px"></el-table-column>
                <el-table-column label="材料小类" prop="productSubcategoryName" align="center" width="100px"></el-table-column>
                <el-table-column label="名称及规格" prop="specsDetail" align="center" width="150px"></el-table-column>
                <el-table-column label="库存" prop="currentInventory" align="center" width="80px"></el-table-column>
                <el-table-column label="最低库存" prop="lowInventory" align="center" width="80px"></el-table-column>
                <el-table-column label="申请采购数量" align="center">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.number" :min="0"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="需求到货日期" align="center">
                    <template #default="scope">
                        <el-date-picker v-model="scope.row.arriveDate" placeholder="年/月/日" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center">
                    <template #default="scope">
                        <el-input type="textarea" v-model="scope.row.remark" maxlength="25" show-word-limit></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { addAuxiliaryPurchaseApi, getAllSubsidiaryApi } from '@/api/sj/warehouse/auxiliary';

const props = defineProps(['visible', 'purchaseApplyList','bagCatagory' ,'data']);
const emits = defineEmits(['close','submit']);
const formData = ref({
    arriveDate: undefined,
    number: undefined,
    remark: undefined
});

const tableData = ref<any[]>([]);

watch(()=>props.purchaseApplyList, (newData)=>{
    const tableForm = newData.map((item:any)=>{
        return {
            ...item,
            specifications: item.specsDetail,
            number: 1,
            arriveDate: undefined,
            remark: undefined
        }
    });
    tableData.value = tableForm;
},{deep: true});

const formRef = ref<FormInstance>();

const handleSubmit = async () => {
    const { code } = await addAuxiliaryPurchaseApi([...tableData.value]);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit',false);
    }
};

const handleClose = ()=>{
    emits('close');
    formRef.value?.resetFields();
    tableData.value = [];
};

const getCompanyList = async () => {
    const { data } = await getAllSubsidiaryApi();
    console.log(data, '123');
    
};

onMounted(() => {
    getCompanyList()
})
</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>